<html>
<head>
    <title>图书管理系统</title>
    <link rel="stylesheet" href="/assets/element-plus/index.css">
    <link rel="stylesheet" href="/assets/fontawesome-free-6.7.2/css/all.min.css">
    <link rel="stylesheet" type="text/css" href="/site/css/styles.css">
</head>
<body>
<div id="app">
    <el-container>
        <!-- 传递状态给侧边栏组件 -->
        <app-sidebar :sidebar-collapsed="sidebarCollapsed"></app-sidebar>
        <el-container>
            <!-- 传递状态和事件处理方法给头部组件 -->
            <app-header :sidebar-collapsed="sidebarCollapsed" @toggle-sidebar="toggleSidebar"></app-header>
            <bookcopy-manager></bookcopy-manager>
            <el-footer><app-footer></app-footer></el-footer>
        </el-container>
    </el-container>
</div>
<!-- 引入 Vue -->
<script src="/assets/vue/vue3.min.js"></script>
<script src="/assets/element-plus/index.full.js"></script>
<!-- 引入 ElementPlus 图标 -->
<script src="https://unpkg.com/@element-plus/icons-vue@2.1.0/dist/index.iife.js"></script>
<!-- 引入 Axios -->
<script src="/assets/axios/axios.min.js"></script>
<script src="/site/js/tools/axios-instance.js"></script>
<script src="/site/js/tools/notification.js"></script>
<script src="/site/js/tools/js-tools.js"></script>
<script src="/site/js/tools/dateUtils.js"></script>
<script src="https://unpkg.com/lodash@4.17.21/lodash.min.js"></script>

<!-- 引入组件 -->
<script src="/site/js/component/header.js"></script>
<script src="/site/js/component/sidebar.js"></script>
<script src="/site/js/component/footer.js"></script>
<script src="/site/js/book/bookCopy/BookcopyQueryForm.js"></script>
<script src="/site/js/book/bookCopy/BookcopyForm.js"></script>
<script src="/site/js/book/bookCopy/BookcopyTable.js"></script>
<script src="/site/js/book/bookCopy/BookcopyManager.js"></script>

<script>
    const {createApp, reactive, ref, onMounted} = Vue;

    const app = {
        // 使用局部注册的方式注册组件
        components: {
            AppHeader, // 注册 AppHeader
            AppSidebar,
            BookcopyManager,
            AppFooter
        },
        setup() {
            // 定义侧边栏折叠状态
            const sidebarCollapsed = ref(false);
            // 定义切换侧边栏折叠状态的方法
            const toggleSidebar = () => {
                console.log("toggleSidebar");
                sidebarCollapsed.value = !sidebarCollapsed.value;
            };
            return {
                sidebarCollapsed, toggleSidebar
            };
        }
    }
    createApp(app).use(ElementPlus).mount('#app');
</script>

</body>
</html>